let { resolve } = require('path');
let webpackHTMLPlugin = require('html-webpack-plugin');
let ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
let obj = {
    entry: {
        main: './src/main.js',
        index: './src/js/index.js'
    },
    output: {
        path: resolve(__dirname, "../dist"),
        filename: "js/[name][contenthash:8].js",
        clean: true,
        publicPath:'/'
    },
    mode: "production",
    // 配置loader
    module: {
        rules: [
            //css打包
            {
                test: /\.css$/,
                // 从后往前执行
                use: [
                    MiniCssExtractPlugin.loader,
                    // "style-loader", // 将 CSS 生成 style 标签插入 HTML 中
                    "css-loader", //将 CSS 转为 CommonJS 的模块
                    "postcss-loader"
                ]
            },
            // less打包
            {
                test: /\.less$/,
                // 从后往前执行
                use: [
                    MiniCssExtractPlugin.loader,
                    // "style-loader", // 将 CSS 生成 style 标签插入 HTML 中
                    "css-loader", //将 CSS 转为 CommonJS 的模块
                    "postcss-loader",
                    "less-loader" //将less变为css
                ]
            },
            //配置 babel 的 loader
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不进行处理的文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                    corejs: { version: 2 } // 指定core-js的版本号为2
                                }
                            ]
                        ], // 指定bebel预设包
                    }
                }
            },
            // 处理图片
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset",
                // 解析器
                parser: {
                    // 指定进行图片base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb    默认8k
                    }
                },
                // 打包生成的文件 - 生成器
                // [ext] 原有的后缀名
                generator: {
                    filename: 'images/[hash:8][ext]',
                },
            },
            // 配置 html 的 loader
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            // 打包字体图标
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,
                type: 'asset',
                // 解析器
                parser: {
                    // 指定进行base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb
                    }
                },
                generator: {
                    filename: 'fonts/[hash:8][ext]',
                },
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename:'css/[contenthash:8].css'
        }),
        new ESLintPlugin(),
        new webpackHTMLPlugin({
            template: "./public/index.html",// 指定html模板文件。
            filename: "index.html", //默认为index.html
            inject: "body",// 将打包生成的JS文件放置在body尾部
            hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。
            minify: {
                removeAttributeQuotes: true,// 移除属性中的双引号
                removeComments: true,// 移除注释
                collapseWhitespace: true,// 去除空格与换行
            }
        })
    ],
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
            new TerserPlugin()
        ],
    },
}

module.exports = obj;